<script setup>
import {ref, computed} from 'vue';

const props = defineProps({
  // 图片数据
  data: {
    type: Array,
    default: () => [], // 图片链接列表
  },
  // 是否有上一篇
  hasPrevious: {
    type: Boolean,
    default: false,
  },
  // 是否有下一篇
  hasNext: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(["good", "download", "like", "prev", "next"])
</script>

<template>
  <div class="album-image-detail">
    <!-- 图片展示区域 -->
    <div class="detail">
      <div class="imgs">
        <img
            v-for="(v,k) in props.data"
            :key="k"
            :src="v"
            alt="图片"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="btns">
        <button class="action-btn" @click="emit('good')">
          <span class="icon">👍</span> 点赞
        </button>
        <button class="action-btn" @click="emit('download')">
          <span class="icon">📥</span> 下载
        </button>
      </div>
    </div>

    <!-- 上一篇和下一篇 -->
    <div class="nav-btns">
      <button class="nav-btn" @click="emit('pref')" :disabled="!hasPrevious">
        <span class="icon">⬅️</span> 上一篇
      </button>
      <button class="nav-btn" @click="emit('next')" :disabled="!hasNext">
        下一篇 <span class="icon">➡️</span>
      </button>
    </div>
  </div>
</template>


<style scoped>
.album-image-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.detail {
  margin-bottom: 20px;
}

.imgs {
  display: grid;
  gap: 20px;
}

.imgs img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* 蓝色阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imgs img:hover {
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 123, 255, 0.5); /* 悬停时阴影更亮 */
}

.btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.action-btn {
  padding: 10px 20px;
  background-color: #007bff; /* 蓝色 */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.action-btn:hover {
  background-color: #0056b3; /* 深蓝色 */
}

.action-btn .icon {
  margin-right: 8px;
}

.nav-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.nav-btn {
  padding: 10px 20px;
  background-color: #17a2b8; /* 青色 */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.nav-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.nav-btn:hover:not(:disabled) {
  background-color: #138496; /* 深青色 */
}

.nav-btn .icon {
  margin: 0 8px;
}
</style>